<template>
  <div>
    <a-button @click="openAdd">添加</a-button>
    <a-table
      :columns="columns"
      :row-selection="rowSelection"
      :rowKey="`menuId`"
      :data-source="treeList"
      :pagination="false"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'id'">
          <a-button type="primary" @click="openEdit(record)">修改</a-button>
          <a-popconfirm
            @confirm="sureDeleted(record.menuId)"
            title="是否要删除该节点"
          >
            <a-button type="primary" danger> 删除</a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
    <a-modal
      v-model:visible="editVisible"
      title="修改"
      :footer="null"
      :maskClosable="false"
      :afterClose="resetForm"
    >
      <a-form
        ref="editFormRef"
        :model="deptForm"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item
          label="部门名称"
          name="deptName"
          :rules="[{ required: true, message: '部门名称不能为空' }]"
        >
          <a-input v-model:value="deptForm.deptName" />
        </a-form-item>
        <a-form-item label="启用状态" name="status">
          <a-switch
            v-model:checked="deptForm.status"
            :checkedValue="1"
            :unCheckedValue="0"
          />
        </a-form-item>
        <a-form-item label="描述" name="remark">
          <a-input v-model:value="deptForm.remark" />
        </a-form-item>
        <a-form-item label="上级部门" name="parentIds">
          <a-cascader
            v-model:value="parentIds"
            :options="treeList"
            :field-names="{
              label: 'deptName',
              value: 'deptId',
              children: 'children',
            }"
            placeholder="请选择上级部门"
            :changeOnSelect="true"
          />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" @click="edit" html-type="submit"
            >确定
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      v-model:visible="addVisible"
      title="新增"
      :footer="null"
      :maskClosable="false"
      :afterClose="resetForm"
    >
      <a-form
        ref="addFormRef"
        :model="deptForm"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item
          label="部门名称"
          name="deptName"
          :rules="[{ required: true, message: '部门名称不能为空' }]"
        >
          <a-input v-model:value="deptForm.deptName" />
        </a-form-item>
        <a-form-item label="启用状态" name="status">
          <a-switch
            v-model:checked="deptForm.status"
            :checkedValue="1"
            :unCheckedValue="0"
          />
        </a-form-item>
        <a-form-item label="描述" name="remark">
          <a-input v-model:value="deptForm.remark" />
        </a-form-item>
        <a-form-item label="上级部门" name="parentIds">
          <a-cascader
            v-model:value="parentIds"
            :options="treeList"
            :field-names="{
              label: 'deptName',
              value: 'deptId',
              children: 'children',
            }"
            placeholder="请选择上级部门"
            :changeOnSelect="true"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" @click="add" html-type="submit"
            >确定
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { Client } from "@/api/clientApi";
import { message } from "ant-design-vue";
import "ant-design-vue/es/message/style/css";
import { h, onMounted, reactive, ref } from "vue";
import type { DeptVo, SysDeptDto } from "@/api";
const columns = [
  {
    title: "部门编号",
    dataIndex: "deptId",
  },
  {
    title: "部门名称",
    dataIndex: "deptName",
  },
  {
    title: "启用状态",
    dataIndex: "status",
  },
  {
    title: "描述",
    dataIndex: "remark",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
  },
  {
    title: "更新时间",
    dataIndex: "createTime",
  },
  {
    title: "操作",
    key: "id",
  },
];

const parentIds = ref<number[]>([]);
const deptForm = reactive<SysDeptDto>({
  deptId: 0,
  parentId: 0,
  deptName: "",
  status: 0,
  remark: "",
});

const editFormRef = ref();
const addFormRef = ref();
/**
 * 修改弹窗的显示变量
 */
const editVisible = ref<boolean>(false);
/**
 * 打开修改弹窗
 * @param record
 */
const openEdit = async (record: SysDeptDto) => {
  editVisible.value = true;
  const rest = await Client.systemDept.getSysDept(record.deptId);
  deptForm.deptId = rest.deptId;
  deptForm.parentId = rest.parentId;
  deptForm.deptName = rest.deptName;
  deptForm.status = rest.status;
  deptForm.remark = rest.remark;
};
/**
 * 提交更新
 */
const edit = () => {
  if (parentIds.value?.length > 0) {
    deptForm.parentId = parentIds.value[parentIds.value.length - 1];
  }
  Client.systemDept.putSysDept(deptForm).then(() => {
    editVisible.value = false;
    getDeptTree();
    message.success("修改成功");
  });
};

const addVisible = ref<boolean>(false);
const openAdd = () => {
  addVisible.value = true;
};
const add = () => {
  if (parentIds.value?.length > 0) {
    deptForm.parentId = parentIds.value[parentIds.value.length - 1];
  }
  Client.systemDept.postSysDept(deptForm).then(() => {
    addVisible.value = false;
    getDeptTree();
    message.success("添加成功");
  });
};

const sureDeleted = (id: number) => {
  Client.systemDept.deleteSysDept(id).then(() => {
    message.success("删除成功");
    getDeptTree();
  });
};

const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: DeptVo[]) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record: DeptVo, selected: boolean, selectedRows: DeptVo[]) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (
    selected: boolean,
    selectedRows: DeptVo[],
    changeRows: DeptVo[]
  ) => {
    console.log(selected, selectedRows, changeRows);
  },
});

const treeList = ref<DeptVo[]>([]);
const getDeptTree = async () => {
  treeList.value = await Client.systemDept.getSysDeptDeptTree();
};
/**
 * 重置表单对象
 */
const resetForm = () => {
  deptForm.deptId = 0;
  deptForm.parentId = 0;
  deptForm.deptName = "";
  deptForm.status = 0;
  deptForm.remark = "";
  parentIds.value = [];
};
onMounted(() => {
  getDeptTree();
});
</script>

<style scoped></style>
